﻿<!DOCTYPE html>
{% load staticfiles %}
<html>
	<head>
		<meta charset="utf-8" />
		<title>房天下 - 发布房屋信息</title>
		<link rel="stylesheet" href="{% static 'css/style.css' %}">
        <link rel="stylesheet" href="{% static 'css/head.css' %}">
	</head>
	<body>
		{% include 'header.html' %}
		<div id="regLogin" class="wrap">
			<div class="dialog">
				<dl class="clearfix">
					<dt>新房屋信息发布</dt>
					<dd class="past">填写房屋信息</dd>
				</dl>
				<div class="box">
					<form action="/rent/publish/" method="post" enctype="multipart/form-data">
						{% csrf_token %}
                        <div style="color:red;">{{hint}}</div>
						<div class="infos">
							<table class="field">
								<tr>
									<td class="field">标 题：</td>
									<td><input type="text" class="text" name="title"></td>
								</tr>
								<tr>
									<td class="field">户 型：</td>
									<td>
										<select class="text" name="type" id="housetype">
											<option value="0">请选择</option>
										</select>
								   </td>
								</tr>
								<tr>
									<td class="field">面 积：</td>
									<td><input type="number" class="mtext" name="area"></td>
								</tr>
								<tr>
									<td class="field">楼 层：</td>
									<td>
										<input type="number" class="stext" name="floor" maxlength="3">
										/
										<input type="number" class="stext" name="totalfloor" maxlength="3">
									</td>
								</tr>
								<tr>
									<td class="field">朝向：</td>
									<td><input type="number" class="mtext" name="direction"></td>
								</tr>
								<tr>
									<td class="field">价 格：</td>
									<td>
										<input type="number" class="mtext" name="price">
										<input type="hidden" name="priceunit" value="元/月">
									</td>
								</tr>
		                        <tr>
									<td class="field">省市区：</td>
									<td>	
										<select id="prov" class="text">
											<option value="0">请选择</option>
										</select>
										<select id="city" class="text">
											<option value="0">请选择</option>
										</select>
										<select id="dist" class="text" name="district">
											<option value="0">请选择</option>
										</select>
		                            </td>
								</tr>
								<tr>
									<td class="field">街 道：</td>
									<td>
										<input type="text" name="street" class="text">
									</td>
								</tr>
								<tr>
									<td class="field">楼 盘：</td>
									<td>
										<input type="text" name="estate" class="text">
									</td>
								</tr>
								<tr>
									<td class="field">其 他：</td>
									<td>
										<input type="checkbox" name="hassubway">地铁
										<input type="checkbox" name="isshared">支持合租
										<input type="checkbox" name="hasagentfees">中介费
									</td>
								</tr>
								<tr>
									<td class="field">上传图片：</td>
									<td>
										<input id="file" type="file" class="text" name="mainphoto" multiple>
										<input id="addbutton" type="button" value="+" class="addbutton">
									</td>
								</tr>
								<tr>
									<td class="field">图片预览：</td>
									<td id="prevArea"><img id="housePhoto" src="" alt="" width="160" height="120"></td>
								</tr>
		                        <tr>
									<td class="field">详细信息：</td>
									<td><textarea name="detail"></textarea></td>
								</tr>
							</table>
							<div class="buttons"><input type="submit" value="立即发布"></div>
						</div>
					</form>
				</div>
			</div>
		</div>
		{% include 'footer.html' %}
		<script src="{% static 'js/jquery.min.js' %}"></script>
		<script type="text/javascript">
			$(function() {
				$('#addbutton').on('click', function() {
					var tr = $(this).parent().parent()
					var img = $('<img>').attr('width', 160).attr('height', 120)
					$('#prevArea').append(img)
					var newTr = $('<tr>')
					var newTd1 = $('<td class="field"></td>')
					var newTd2 = $('<td>')
					var fileInput = $('<input type="file" name="photo" class="text"/>')
					fileInput.on('change', function() {
						doPreview(this, img)
					})
					var minusButton = $('<input type="button" value="-" class="minusbutton"/>')
					minusButton.on('click', function() {
						newTr.remove()
						img.remove()
					})
					newTd2.append(fileInput)
					newTd2.append(minusButton)
					newTr.append(newTd1)
					newTr.append(newTd2)
					tr.after(newTr)
				})
				
				$('#file').on('change', function() {
					doPreview(this, $('#housePhoto'))
				})
			
			})
			
			function doPreview(source, target) {
				var file = source.files[0]
				if(/image\/\w+/.test(file.type)) {
					if(window.FileReader) {
						var fr = new FileReader()
						fr.onloadend = function() {
							target.attr('src', this.result)
						}
						fr.readAsDataURL(file)
					}
				} else {
					alert("只能选择图片文件")
					source.value = ""
					target.attr('src', '')
				}
			}
		</script>
		<script>
		$(function() {
			function get_house_type_data() {
				$.ajax({
					'url': '/api/housetypes/',
					'type': 'get',
					'dataType': 'json',
					'success': function (json) {
						for (var i = 0; i < json.length; i += 1) {
							var type = json[i]
							var $option = $('<option>').val(type.typeid).text(type.name)
							$('#housetype').append($option)
						}
					}
				})
			}

			function get_district_data(pid, elemId) {
				var url = '/api/districts/' + (pid ? pid : '')
				$.ajax({
					'url': url,
					'type': 'get',
					'dataType': 'json',
					'success': function (json) {
						var array = pid ? json.cities : json
						for (var i = 0; i < array.length; i += 1) {
							var district = array[i]
							var $option = $('<option>').val(district.distid).text(district.name)
							$('#' + elemId).append($option)
						}
					}
				})
			}

			$('#prov').on('change', function(evt) {
				$('#city>option:gt(0)').remove()
				$('#dist>option:gt(0)').remove()
				get_district_data($(evt.target).val(), 'city')
			})
			$('#city').on('change', function(evt) {
				$('#dist>option:gt(0)').remove()
				get_district_data($(evt.target).val(), 'dist')
			})

			get_house_type_data()
			get_district_data(null, 'prov')
			get_estate_data()
		})
		</script>
	</body>
</html>